<template>
    <div class="page">
      <div id="personalInfo-form">
        <span style="font-size: 30px;font-family: 黑体;margin-left: 175px">修改个人信息</span>
        <Form ref="personalInfoFormData" :model="personalInfoFormData" :rules="ruleValidate" :label-width="80" style="margin-top: 20px">
          <FormItem  label="用户名" prop="userName">
            <Input prefix="ios-contact" disabled v-model="personalInfoFormData.userName" placeholder="用户名" clearable style="width: 400px;" />
          </FormItem>
          <FormItem  label="手机号" prop="mobile">
            <Input prefix="ios-call" v-model="personalInfoFormData.mobile" placeholder="手机号"  clearable style="width: 400px;" />
          </FormItem>
          <FormItem label="邮箱" prop="email">
            <Input prefix="ios-mail" v-model="personalInfoFormData.email" placeholder="邮箱"  clearable style="width: 400px;" />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input prefix="ios-lock" v-model="personalInfoFormData.password" type="password" password placeholder="密码"  clearable style="width: 400px;" />
          </FormItem>
          <FormItem label="确认密码" prop="verifyPass">
            <Input prefix="ios-lock" v-model="personalInfoFormData.verifyPass" type="password" password placeholder="再次确认密码"  clearable style="width: 400px;" />
          </FormItem>
          <Button type="primary" size="large" style="width: 150px;margin-left: 195px;" @click="handleSubmit('personalInfoFormData')">确认修改</Button>
        </Form>
      </div>
    </div>
</template>

<script>
  import ManageService from '@/services/ManageService'
  import cookies from 'js-cookie'
    export default {
        name: "PersonalInfoComponent",
        data () {
          const validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('密码不能为空'));
            } else {
              if (this.personalInfoFormData.verifyPass !== '') {
                // 对第二个密码框单独验证
                this.$refs.personalInfoFormData.validateField('verifyPass');
              }
              callback();
            }
          };
          const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次确认密码'));
            } else if (value !== this.personalInfoFormData.password) {
              callback(new Error('两次输入的密码不一致'));
            } else {
              callback();
            }
          };
          return {
            personalInfoFormData: {
              userName: '',
              mobile:'',
              email:'',
              password: '',
              verifyPass:''
            },
            manageService:null ,
            respManageUserInfoData:null,
            ruleValidate: {
              userName: [
                { required: true, message: '用户名不能为空', trigger: 'blur' }
              ],
              mobile: [
                { required: true, message: '手机号不能为空', trigger: 'blur' }
              ],
              email: [
                { required: true, message: '邮箱不能为空', trigger: 'blur' }
              ],
              password: [
                { validator: validatePass, trigger: 'blur' }
              ],
              verifyPass: [
                { validator: validatePassCheck, trigger: 'blur' }
              ]
            }
          };
        },
        created() {
          this.init();
        },
        methods: {
          init() {
            this.manageService = new ManageService(this);
            this.getManageUserInfo(cookies.get("UserId"));
          },
          getManageUserInfo(userId){
            let params = {
              "userId": userId
            };
            this.manageService.getManageUserInfo(params, function(_this, data){
              _this.respManageUserInfoData = data.data;
              _this.personalInfoFormData.userName = _this.respManageUserInfoData[0].userName;
              _this.personalInfoFormData.email = _this.respManageUserInfoData[0].email;
              _this.personalInfoFormData.mobile = _this.respManageUserInfoData[0].mobile;
              _this.personalInfoFormData.password = _this.respManageUserInfoData[0].password;
              _this.personalInfoFormData.verifyPass = _this.respManageUserInfoData[0].password;
            })
          },
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                this.editManageUserInfo();
              } else {
                console.log("请正确填写信息")
                this.$Message.error('请正确填写信息');
              }
            })
          },
          editManageUserInfo(){
            let params = {
              "id": cookies.get("UserId"),
              "mobile": this.personalInfoFormData.mobile,
              "userName": this.personalInfoFormData.userName,
              "email": this.personalInfoFormData.email,
              "password": this.personalInfoFormData.password
            };
            this.manageService.editManageUserInfo(params, function(_this, data){
              _this.$Message.success("修改成功");
            })
          }
        }

    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>
